<template>
  <el-dialog
    :title="artData.title"
    :visible.sync="dialogVisible"
    width="800px"
    :before-close="handleClose">
    <div v-loading="loading" class="an-artcot">
      <el-alert
        :title="artData.author + '____' + artData.creation_time"
        :closable="false"
        :description="artData.abstract"
        type="info">
      </el-alert>
      <div v-html="artData.content">
      </div>
    </div>

  </el-dialog>
</template>

<script>
  import {articleinfo} from '@/api/data'
    export default {
      name: "info-art",
      props:{
        IsdialogVisible:{
          type: Boolean,
          default: false,
        },
        artID:{
          type: Number,
          default: 0,
        }
      },
      data(){
        return{
          loading:false,
          dialogVisible:this.IsdialogVisible,
          articleID:this.artID,
          artData:{},
        }
      },
      mounted(){
        this.anLoad();
      },
      methods:{

        anLoad(){
          if(this.articleID !=0){
            this.loading = true;
            articleinfo(this.articleID).then(res=>{
              this.artData = res.data;
              this.loading = false;
            })
          }
        },

        handleClose(){
          this.dialogClose();
        },

        dialogClose(){
          this.dialogVisible = false;
          this.$emit('update:IsdialogVisible', false);
        },

      }
    }
</script>

<style scoped>
.an-artcot{
  max-height: 600px;
  overflow-y: auto;
}
</style>
